<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>header,时间线,</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
      <script src="../zepto.min.js"></script>

</head>

<body ontouchstart>
  <div class="weui-header bg-blue"> 
  <div class="weui-header-left"> <a class="icon icon-106 f-white">返回</a>  </div>
   <h1 class="weui-header-title">我们都爱小电影</h1>
    <div class="weui-header-right"><a class="icon icon-41 f-white">更多</a></div> 
    </div>

<br>
  <div class="bg-orange weui-header "> 
  <div class="weui-header-left"> <a class="icon icon-106 f-white"></a>  </div>
   <h1 class="weui-header-title">千里中国心</h1>
    <div class="weui-header-right"><a class="icon icon-10 f-white"></a></div> 
    </div>  
    <br>
    
      <div class="weui_btn_primary weui-header "> 
  <div class="weui-header-left"> <a class="icon icon-106 f-white"></a>  </div>
   <h1 class="weui-header-title">清朝是历史的倒退</h1>
    <div class="weui-header-right"><a class="icon icon-10 f-white"></a></div> 
    </div> 
    <br> 
      <div class="weui_btn_warn weui-header "> 
  <div class="weui-header-left"> <a class="icon icon-106 f-white"></a>  </div>
   <h1 class="weui-header-title">孔融是个假道学</h1>
    <div class="weui-header-right"><a class="icon icon-10 f-white"></a></div> 
    </div>     
   <br> 
      <div class="weui_btn_default weui-header "> 
  <div class="weui-header-left"> <a class="icon icon-106 f-green"></a>  </div>
   <h1 class="weui-header-title f-green">三国是一部精彩历史</h1>
    <div class="weui-header-right"><a class="icon icon-105 f-green"></a></div> 
    </div>  
  <br>  
  <div class="timeline">
  <ul>
  <li class="timeline-item"> <div class="timeline-item-head-first"> <i class="weui_icon weui_icon_success_no_circle timeline-item-checked"></i> </div> <div class="timeline-item-tail"></div> <div class="timeline-item-content"> <h4 class="recent">广州市 已发出</h4> <p class="recent">2016-04-17 12:00:00</p> </div> </li>
   <li class="timeline-item"> <div  class="timeline-item-head"> <i class="weui_icon weui_icon_success_no_circle timeline-item-checked hide" ></i> </div> <div class="timeline-item-tail" ></div> <div class="timeline-item-content"> <h4> 申通快递员 广东广州 收件员 xxx 已揽件</h4> <p>2016-04-16 10:23:00</p> </div> </li>
   <li class="timeline-item"> <div  class="timeline-item-head"> <i class="weui_icon weui_icon_success_no_circle timeline-item-checked hide" ></i> </div> <div class="timeline-item-tail" ></div> <div class="timeline-item-content"> <h4> 这是一个时间线组件,非常适合用于一直改变得数据展示,总的来说,这是一套非常美好的组建扩展这是一个时间线组件,非常适合用于一直改变得数据展示,总的来说,这是一套非常美好的组建扩展</h4> <p>2016-04-16 10:23:00</p> </div> </li>
    <li class="timeline-item"> <div  class="timeline-item-head"> <i class="weui_icon weui_icon_success_no_circle timeline-item-checked hide" ></i> </div> <div class="timeline-item-tail hide" ></div> <div class="timeline-item-content"> <h4> 商家正在通知快递公司揽件</h4> <p>2016-04-15 9:00:00</p> </div> </li>
     </ul> </div>       
</body>
</html>
